<template>
  <div class="container">
    <div class="box">
      <img src="../assets/header.jpg" alt="" />
      <el-form ref="loginform" :model="form" :rules="rules" label-width="80px">
        <!-- //用户名 -->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <!-- 密码  不要使用铭文 加type="password"-->
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
//导入请求函数
import { Login } from "@/request";
//导入cookie
import { setCookie } from "@/utils/cookie";
export default {
  data() {
    return {
      form: {
        username: "cuihua",
        password: "123123",
      },
      //验证数据
      rules: {
        username: [{ validator: this.checkUser, trigger: "blur" }],
        password: [{ validator: this.checkPass, trigger: "blur" }],
      },
    };
  },
  methods: {
    //定义两个方法--验证用户
    checkUser(rule, value, callback) {
      this.check(value, callback, "用户");
    },
    checkPass(rule, value, callback) {
      this.check(value, callback, "密码");
    },
    //封装上述两个方法中的判断
    check(value, callback, text) {
      if (value === "") {
        callback(new Error(text + "不能为空!"));
        return;
      }
      callback();
    },
    onSubmit() {
      //refs父组件强行获取子组件
      this.$refs["loginform"].validate(async (valid) => {
        //不通过验证
        if (!valid) {
          return false;
        }
        //通过验证 - 获取输入的账号密码 双向的数据绑定form 中有 - 发送请求在request中 并调用
        // console.log(this.form);
        let data = await Login(this.form);
        //    console.log(data);
        //判断 是否登录成功 -
        //下面的data默认会加一层壳还没脱壳 - 需要在axios响应拦截加response.data
        let { msg, error_code } = data;

        //给vuex中存登录状态  --去store创建数据  定义方法  设置true表示已经登录
        this.$store.commit("changeLoginStatus", true);
        //权限存储在Session Storage  -- 转字符串
        sessionStorage.setItem("auths", JSON.stringify(data.data.auths));
        if (error_code === 200) {
          // 登录成功  存储令牌 + cookie + 权限
          //令牌存在本地存储
          localStorage.setItem("adminToken", data.data.token);
          //调用setcookie    存储用户名,id
          setCookie("adminname", data.data.username);
          setCookie("adminId", data.data.userId);
          this.$message({
            message: msg,
            type: "success",
            //弹窗显示毫秒数
            duration: 1500,
            //关闭之后执行的回调函数
            onClose: () => {
              //登陆成功调转到/home
              this.$router.push("/home/index");
            },
          });
        } else {
          this.$message({
            message: msg,
            type: "error",
          });
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped>
// body,html{
//     width: 100%;
//     height: 100%;
// }
.container {
  width: 100%;
  height: 100%;
  background-color: aqua;

  .box {
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      position: absolute;
      text-align: center;
      margin-left: 175px;
    }
    width: 400px;
    height: 250px;
    border: 1px solid #ccc;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .el-input {
      width: 90%;
    }
    .el-form {
      margin-top: 65px;
    }
    .el-button {
      margin-left: 87px;
    }
  }
}
</style>
